<template>
  
  <view class="skeleton-wrapper">
    <view
        class="skeleton-container"
        v-for="i in count"
        :key="i"
        :style="{ height: containerHeight }"
    >
      
      <view class="skeleton-top">
        <view class="skeleton-avatar"></view>
        <view class="skeleton-text-group">
          <view class="skeleton-text-line" :style="{ width: textWidths[0] }"></view>
          <view class="skeleton-text-line" :style="{ width: textWidths[1] }"></view>
        </view>
        <view class="skeleton-badge"></view>
      </view>

      
      <view class="skeleton-steps">
        <view
            class="skeleton-step"
            v-for="step in stepCount"
            :key="step"
            :style="{ width: stepSize, height: stepSize }"
        ></view>
      </view>

      
      <view class="skeleton-bottom">
        <view class="skeleton-notice" :style="{ height: noticeHeight }"></view>
        <view class="skeleton-button" :style="{ width: buttonWidth, height: buttonHeight }"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SkeletonCard',
  props: {
    
    count: {
      type: Number,
      default: 1
    },
    
    containerHeight: {
      type: String,
      default: 'auto'
    },
    
    textWidths: {
      type: Array,
      default: () => ['70%', '40%']
    },
    
    stepCount: {
      type: Number,
      default: 3
    },
    
    stepSize: {
      type: String,
      default: '80rpx'
    },
    
    noticeHeight: {
      type: String,
      default: '60rpx'
    },
    
    buttonWidth: {
      type: String,
      default: '120rpx'
    },
    
    buttonHeight: {
      type: String,
      default: '60rpx'
    }
  }
}
</script>

<style scoped>

.skeleton-wrapper {
  width: 100%;
}

.skeleton-container {
  width: 100%;
  background-color: #f8f8f8;
  border-radius: 12px;
  padding: 20rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-sizing: border-box;
}

.skeleton-top {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.skeleton-avatar {
  width: 80rpx;
  height: 80rpx;
  min-width: 80rpx;
  border-radius: 12px;
  background-color: #e0e0e0;
  margin-right: 20rpx;
}

.skeleton-text-group {
  flex: 1;
  min-width: 0;
}

.skeleton-text-line {
  height: 30rpx;
  background-color: #e0e0e0;
  margin-bottom: 10rpx;
  border-radius: 6px;
  animation: pulse 1.5s infinite ease-in-out;
}

.skeleton-badge {
  width: 100rpx;
  height: 40rpx;
  min-width: 100rpx;
  background-color: #e0e0e0;
  border-radius: 20px;
  margin-left: 10rpx;
}

.skeleton-steps {
  display: flex;
  justify-content: space-between;
  margin: 40rpx 0;
}

.skeleton-step {
  border-radius: 12px;
  background-color: #e0e0e0;
  animation: pulse 1.5s infinite ease-in-out;
  flex-shrink: 0;
}

.skeleton-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30rpx;
}

.skeleton-notice {
  flex: 1;
  background-color: #e0e0e0;
  border-radius: 8px;
  animation: pulse 1.5s infinite ease-in-out;
  margin-right: 20rpx;
}

.skeleton-button {
  background-color: #e0e0e0;
  border-radius: 30px;
  animation: pulse 1.5s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}
</style>